<!--
 * @Author: new-wang
 * @Date: 2025-04-24 16:19:28
 * @LastEditors: new-wang
 * @LastEditTime: 2025-08-28 18:02:27
 * @FilePath: \v3bbs\src\components\login\LoginIndex.vue
 * @Description:登录模态框
-->
<template>
  <a-modal class="login-modal" v-model:open="loginVisible" @ok="loginVisible = false" :footer="null" :width="'320px'">
    <a-form id="login-form" ref="formRef" :model="formObj" :rules="rules">
      <h1 class="title">
        账密登录
      </h1>
      <a-form-item name="account">
        <a-input v-model:value="formObj.account" size="large" placeholder="用户名/手机号/邮箱">
          <template #prefix>
            <UserOutlined style="color: rgba(0,0,0,.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input type="password" autocomplete="off" v-model:value="formObj.password" size="large" placeholder="请输入密码">
          <template #prefix>
            <LockOutlined style="color: rgba(0,0,0,.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox v-model:checked="formObj.remember">
          记住账号
        </a-checkbox>
        <a class="login-form-forgot">
          忘记密码
        </a>
        <a-button type="primary" @click.prevent="handleSubmit" class="login-form-button" size="large">
          登录
        </a-button>
        <!-- <div>
            其他登录 #TODO
          </div> -->
        Or
        <a @click="register" :style="{ color: themeColor }">
          现在注册
        </a>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue"
import { useConfigStore } from "@/stores/config"
import { storeToRefs } from "pinia";
import { reactive, ref, type UnwrapRef } from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { loginReq } from '@/api/loginService'
import type { LoginData } from '@/types/basic'

const { loginVisible, registerVisible, themeColor } = storeToRefs(useConfigStore())
const formRef = ref()
const formObj: UnwrapRef<LoginData> = reactive({
  account: "",
  password: "",
  remember: true
})
const rules: Record<string, Rule[]> = {
  account: [
    { required: true, message: "请输入您的用户名", trigger: "change" }
  ],
  password: [
    { required: true, message: "请输入您的密码", trigger: "change" }
  ]
}
/**
 * 提交表单 - 登录 - 表单校验
 */
const handleSubmit = () => {
  console.log('现在进行登录')
  formRef.value?.validate().then((res: LoginData) => {
    console.log("表单校验通过", res)
    loginFunc()
  }).catch(() => { })
}

/**
 * 登录 - 接口调用
 */
const loginFunc = () => {
  console.log('现在进行登录接口调用')
  loginReq(formObj).then(res => {
    console.log("登录接口调用成功", res)
  }).catch(err => {
    console.log("登录接口调用失败", err)
  })
}
/**
 * 注册
 */
function register() {
  loginVisible.value = false
  registerVisible.value = true
}

</script>

<style scoped lang="less">
#login-form {
  .title {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 15px;
  }

  .ant-form-item {
    margin-bottom: 10px;
    line-height: 40px;
  }

  .login-form-forgot {
    float: right;
  }

  .login-form-button {
    width: 100%;
  }
}
</style>
